<template>
	<view>
		<!-- 选择车型 -->
		<u-popup v-model="showRight" mode="right">
			<scroll-view :scroll-top="0" scroll-y="true" :style="{ height: winHeight + 'px' }">
				<block v-for="(list, idx) in vehicle" :key="idx">
					<view class="vehicle-list-item">
						<view v-if="list.data && list.data.length" :id="list.letter" class="vehicle-list-item-title">{{ list.letter }}</view>
						<view v-if="list.data && list.data.length" class="uni-list">
							<view v-for="(item, index) in list.data" :key="index" class="vehicle-list-item-contect" hover-class="uni-list-item--hover"
							 @click="chooseVehicle(item)">
								<view class="uni-list-item__content">{{ item.name }}</view>
							</view>
						</view>
					</view>

				</block>
			</scroll-view>
		</u-popup>
		<!-- 选择品牌 -->
		<u-index-list :scrollTop="scrollTop" :index-list="indexList">
			<view v-for="(item, index) in list" :key="index">
				<u-index-anchor :index="item.letter" />
				<!-- 第一个渲染宫格 -->
				<view v-if="index==0" class="list-cell u-border-bottom">
					<u-grid :col="5">
						<u-grid-item v-for="(item, index1) in item.data" :key="index1" @click="chooseEvent(item)">
							<u-image width="80rpx" height="80rpx" :fade="false" :src="item.img" @click="chooseEvent(item)"></u-image>
							<view class="grid-text">{{item.name}}</view>
						</u-grid-item>
					</u-grid>
				</view>
				<!-- 其它渲染列表 -->
				<view v-else class="list-cell u-border-bottom" v-for="(item, index2) in item.data" :key="index2" @click="chooseEvent(item)">
					<u-image width="60rpx" height="60rpx" :src="item.img" @click="chooseEvent(item)"></u-image> <text class="anchor-text">{{item.name}}</text>
				</view>
			</view>
		</u-index-list>
		
		<u-modal v-model="show" :show-title="false" confirm-text="已阅" @confirm="confirm">
			<view class="slot-content">
				<rich-text style="white-space: pre-wrap;" :nodes="params.debug_txt"></rich-text>
			</view>
		</u-modal>
		
	</view>
</template>

<script>
	import {
		carBrands
	} from '@/data/allBrands.js'
	export default {
		data() {
			return {
				showRight: false,
				scrollTop: 0,
				indexList: [],
				list: [],
				vehicle: [],
				select_path:{},
				winHeight: uni.getSystemInfoSync().windowHeight,
				params: [],
				show: false,
			}
		},
		onLoad(option) {
			let _self = this
			if (option.hasOwnProperty('params')) {
				_self.params = JSON.parse(option.params)
			}
		},
		onShow(option) {
			let _self = this
			_self.chooseComplete()	
		},
		onUnload() {
			let _self = this
		},
		created() {
			let _self = this
			let _obj = []
			_obj.push({
				'letter': '热门品牌',
				'data': []
			});
			//热门车型数据
			carBrands.HotBrand.filter(item => {
				var _data = item['Brand'].split(' - ');
				_obj[0].data.push({
					'brand': item['Brand'],
					'name': _data[1],
					'img': item['ImageUrl'],
					'md5': item['md5']
				})
				return item.name = _data[0];
			})
			//车型列表
			carBrands.Brand.filter(item => {
				var _data = item['Brand'].split(' - ');
				var _index = _obj.findIndex(_item => {
					return _item.letter == _data[0] ? true : false;
				})
				if (-1 == _index) {
					_obj.push({
						'letter': _data[0],
						'data': [{
							'brand': item['Brand'],
							'name': _data[1],
							'img': item['ImageUrl'],
							'md5': item['md5']
						}]
					})
				} else {
					_obj[_index].data.push({
						'brand': item['Brand'],
						'name': _data[1],
						'img': item['ImageUrl'],
						'md5': item['md5']
					})

				}
			})
			_self.list = _obj;
			_self.indexList = this.list.map(val => {
				return val.letter;
			})
		},
		onPageScroll(e) {
			let _self = this
			_self.scrollTop = e.scrollTop;
		},
		methods: {
			//选择品牌
			chooseEvent(e) {
				let _self = this
				_self.vehicle = _self.select_path = {}
				_self.select_path.computed = false
				_self.select_path.brand_name = e.name
				_self.select_path.brand_id = e.md5
				let _obj = []
				let url = e.md5 + '/Vehicle.js';
				_self.$u.get(url).then(res => {
					res.filter(item => {
						var _index = _obj.findIndex(_item => {
							return _item.letter == item['BrandType'];
						})

						if (-1 == _index) {
							_obj.push({
								'letter': item['BrandType'],
								'data': [{
									'VehicleId': item['VehicleId'],
									'name': item['CarName']
								}]
							})
						} else {
							_obj[_index].data.push({
								'VehicleId': item['VehicleId'],
								'name': item['CarName']
							})

						}
					})
					_self.vehicle = _obj;
				});
				_self.showRight = true;
			},
			//选择车辆
			chooseVehicle(e) {
				let _self = this
				let url = ''
				uni.removeStorageSync('vehice_storage');
				url = _self.select_path.brand_id + '/' + e.VehicleId + '.js';
				_self.select_path.vehicle_id = e.VehicleId
				_self.select_path.vehicle_name = e.name
				_self.$u.get(url).then(res => {
					uni.setStorageSync('vehice_storage', res);
					_self.showRight = false
					/*
					数据里包含最多三级数据 [排量,年份,款式]
					如果返回为数据长度为0则没有下级数据
					*/
					if (Object.keys(res).length == 0) {
						_self.params = _self.select_path;
						_self.chooseComplete();
						return
					}
					uni.redirectTo({
						url: '/pages/selector/vechice?params='+JSON.stringify(_self.select_path)
					})

				})
			},
			chooseComplete(){
				if(this.params.hasOwnProperty('brand_name')){
					this.params.computed = true
					this.show = true
					this.params.debug_txt = JSON.stringify(this.params, null, 4)
					console.log(this.params)
				}
				
			},
			confirm(){
				this.show = false
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 10px 24rpx;
		overflow: hidden;
		color: $u-content-color;
		font-size: 14px;
		line-height: 30px;
		background-color: #fff;
	}

	.anchor-text {
		margin-left: 20rpx;
	}

	.vehicle-list-item-title {
		min-width: 300rpx;
		padding: 24upx 30upx;
		line-height: 1.5;
		background-color: #f7f7f7;
		font-size: 32upx
	}

	.vehicle-list-item-contect {
		font-size: 32upx;
		padding: 24upx 30upx;
		width: 100%;
		box-sizing: border-box;
		flex: 1;
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-data: center;
		border-bottom: 1rpx solid #eee;
		;
	}
</style>
